<!-- 父组件 ParentComponent.vue -->
<template>
  <div class="parent-container">
    <!-- 子组件 -->
    <CardComponent :title="cardTitle" :content="cardContent" ref="zkxs">
      <!-- 插槽传递按钮 -->
      <template #footer>
        <button @click="toggleCard">{{ isCollapsed ? '展开' : '隐藏' }} Card</button>
      </template>
    </CardComponent>
  </div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue'
import CardComponent from './SonsonDemo/CardComponent.vue'

const cardTitle = ref('我是父组件的标题')
const cardContent = ref('父组件的内容')
const isCollapsed = ref(false)

const zkxs = useTemplateRef('zkxs')
const toggleCard = () => {
  isCollapsed.value = !isCollapsed.value
  zkxs.value?.zk(isCollapsed.value)
}

watch(isCollapsed, (newValue) => {
  console.log('折叠状态已更改:', newValue)
})
</script>

<style lang="scss" scoped>
/* 父组件 ParentComponent.vue */
.parent-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
}
</style>
